<template>
	<div class="contact">
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="item" v-for="item in chatList">
				<pcUsermsg v-if="item.userType === 0" :msg="item.dialogueContent"></pcUsermsg>
				<appUsermsg v-else :msg="item.dialogueContent"></appUsermsg>
			</view>
		</scroll-view>
		<view class="ipt">
			<uni-easyinput v-model="message" placeholder="请输入">
				<template #right>
					<view class="iconfont icon-fasong" @click="sendMessage"></view>
				</template>
			</uni-easyinput>
		</view>
	</div>
</template>

<script>
import appUsermsg from '@/pages/concat/appUsermsg.vue';
import pcUsermsg from '@/pages/concat/pcUsermsg.vue';
import { getChatList, addChat, Communication } from '../../api/chat/chat';
//  未完成不能动态将将对话写道最后
export default {
	data() {
		return {
			message: '',
			pageNum: 1,
			dialogueId: 0,
			chatList: []
		};
	},
	watch: {
		height() {
			return 100;
		}
	},
	components: {
		pcUsermsg,
		appUsermsg
	},
	onLoad(option) {
		this.dialogueId = option.id;
	},
	async mounted() {
		await this.getChat();
		setInterval(this.getMore, 1000);
	},
	methods: {
		async sendMessage() {
			console.log(this.$refs);
			if (this.message.trim() === '') return;
			// 发送请求
			console.log(this.message);
			const res = await addChat({
				dialogueId: this.dialogueId,
				dialogueContent: this.message
			});
			// 在发起请求查询
			await this.getMore();
			this.message = '';
		},
		async getMore() {
			const { data } = await Communication(this.dialogueId);
			data.reverse();
			data.forEach((item) => {
				const index = this.chatList.findIndex((chat) => {
					return chat.id === item.id;
				});
				if (index === -1) {
					this.chatList.push(item);
				}
			});
		},
		async getChat() {
			const { rows, total } = await getChatList({
				pageNum: this.pageNum,
				pageSize: 10,
				dialogueId: this.dialogueId
			});
			rows.reverse();
			this.chatList = this.chatList.concat(rows);
		}
	}
};
</script>

<style lang="less" scoped>
.contact {
	.scroll-view {
		height: calc(100vh - 80rpx);
		padding: 20rpx 0;
		.item {
			margin-bottom: 20rpx;
		}
	}
	.ipt {
		bottom: 0;
		position: fixed;
		width: 100%;
		.iconfont {
			padding: 20rpx;
			font-size: 40rpx;
		}
	}
}
</style>
